@import "tailwindcss";

@plugin '../hero.ts';
@config "../tailwind.config.js";
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';


.button-base {
  @apply bg-tertiary border border-neutral-600 rounded-xs;
}

.skeleton {
  @apply bg-gray-400 rounded-md animate-pulse;
}

.skeleton-round {
  @apply bg-gray-400 rounded-full animate-pulse;
}

.heading {
  @apply text-[28px] leading-8 -tracking-[0.02em] font-bold text-content-2;
}

.loader {
  background: #C9B974;
  animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
  0% {
    box-shadow: 20px 0 #C9B974, -20px 0 rgba(201,185,116,0.1);
    background: #C9B974;
  }
  33% {
    box-shadow: 20px 0 #C9B974, -20px 0 rgba(201,185,116,0.1);
    background: rgba(201,185,116,0.1);
  }
  66% {
    box-shadow: 20px 0 rgba(201,185,116,0.1), -20px 0 #C9B974;
    background: rgba(201,185,116,0.1);
  }
  100% {
    box-shadow: 20px 0 rgba(201,185,116,0.1), -20px 0 #C9B974;
    background: #C9B974;
  }
}
